<template>
	<view class="mainpadding">
		<view class="sanshier xiaohei fonweight">充值金额</view>
		<view class="xiahuaxian flexleft margin_top2">
			<view class="bigtext xiaohei fonweight">￥</view>
			<input type="number" placeholder="请输入充值金额" disabled v-model="recharge_item_price">
		</view>
		<view class="mainpadding ffffff margin_top1">
			<view class="sanshier xiaohei fonweight ">选择支付方式</view>
			<view class="flexleft margin_top">
				<u-icon name="error-circle-fill" color="#E11B1B" size="20" class="margin_right1"></u-icon>
				<view class="ershil xiaohei nofonweight ">只能选择一种支付方式</view>
			</view>
			<view class="flexbetween margin_top" v-if="type==1" @click="pay_type=30">
				<view class="flexleft ">
					<u-icon name="rmb-circle-fill" color="#FE9C01" size="24" class="margin_right1"></u-icon>
					<view class="sanshier xiaohei nofonweight ">平台支付</view>
				</view>
				<view class="">
					<!-- 未选中 -->
					<u-icon class="" name="checkmark-circle-fill" v-if="pay_type!=30" color="#999" size="24"></u-icon>
					<u-icon class="" name="checkmark-circle-fill" v-if="pay_type==30" color="#1BA95B"
						size="24"></u-icon>
				</view>
			</view>
			<view class="flexbetween margin_top" @click="pay_type=10">
				<view class="flexleft ">
					<u-icon name="weixin-circle-fill" color="#50B674" size="24" class="margin_right1"></u-icon>
					<view class="sanshier xiaohei nofonweight ">微信支付</view>
				</view>
				<view class="">
					<u-icon class="" name="checkmark-circle-fill" v-if="pay_type!=10" color="#999" size="24"></u-icon>
					<u-icon class="" name="checkmark-circle-fill" v-if="pay_type==10" color="#1BA95B"
						size="24"></u-icon>
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="flexbetween margin_top" @click="pay_type=20">
				<view class="flexleft">
					<u-icon name="zhifubao-circle-fill" color="#5A9EF7" size="24" class="margin_right1"></u-icon>
					<view class="sanshier xiaohei nofonweight ">支付宝支付</view>
				</view>
				<view class="">
					<u-icon class="" name="checkmark-circle-fill" v-if="pay_type!=20" color="#999" size="24"></u-icon>
					<u-icon class="" name="checkmark-circle-fill" v-if="pay_type==20" color="#1BA95B"
						size="24"></u-icon>
				</view>
			</view>
			<!-- #endif -->
		</view>
		<view class="gudingdb mainpadding" @click="submit">
			<view class="bigbtn">立即充值</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				type: 0, //0我的余额充值，1我的某一个会员卡的余额充值
				recharge_item_id: "",
				recharge_item_price: "",
				pay_type: 10, //支付方式:10=微信,20=支付宝,30=平台支付
				openid:"",
			}
		},
		onLoad(options) {
			//接收对象
			let data = JSON.parse(decodeURIComponent(options.msg));
			console.log(data);
			this.recharge_item_id= data.recharge_item_id
			this.recharge_item_price= data.recharge_item_price
			this.type= data.type
			// #ifdef MP-WEIXIN
			this.getopenid()
			// #endif
		},
		methods: {
			getopenid() {
				let _this = this
				uni.login({
					success(res) {
						if (res.code) {
							httpRequest.request('/api/user/getopenid', 'GET', {
								code: res.code
							}).then(resp => {
								_this.openid = resp.data.openid
							}).catch(err => {})
						}
					}
				})
			},
			submit() {
				let platform = ""
				// #ifdef APP-PLUS
				platform = "10"
				// #endif
				// #ifdef MP-WEIXIN || H5
				platform = "20"
				// #endif
				let data = {
					recharge_item_id: this.recharge_item_id,
					pay_type: this.pay_type,
					platform
				}
				if (platform == 20 && this.pay_type == 10) {
					this.$set(data, "openid", this.openid)
				}
				httpRequest.request('/api/rechargeorder/rechargeMoney', 'POST', data).then(res => {
					if(res.code==1){
						if(this.pay_type==30){//余额支付
							httpRequest.toast(res.msg)
							setTimeout(()=>{
								uni.navigateBack(1)
							},1000)
						} else if (this.pay_type == 10) { //微信支付
							// #ifdef MP-WEIXIN
							this.callPayMent(JSON.parse(res.data.wxconfig))
							// #endif
							// #ifdef APP-PLUS
							this.appcallPayMent(res.data.appconfig)
							// #endif
						}else{//支付宝支付
							this.appcallPayMentzfb(res.data.appconfig)
						}
					}else{
							httpRequest.toast(res.msg)
						}
				})
			},
			callPayMent(data) {
				let _this = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: data.timeStamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: data.signType,
					paySign: data.paySign,
					success: function(res) {
						// 支付成功
						uni.navigateBack(1)
					}
				});
			},
			appcallPayMent(data) {
				console.log(data, 12312121)
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo: data, //后台返回的支付数据
					success: function(res) {
						uni.navigateBack(1)
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			appcallPayMentzfb(data) {
				console.log(data, 12312121)
				uni.requestPayment({
					provider: 'alipay',
					orderInfo: data, //后台返回的支付数据
					success: function(res) {
						uni.navigateBack(1)
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			// 跳转充值成功
			tzljcz() {
				uni.navigateTo({
					url: '/pages_julebu/chongzhicg'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.huibox {
		background: #F5F5F5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
</style>